<template>
	<div>
		<div class="up">
			<p>自助购物指南</p>
		</div>
		<div class="in">
			<div class="in-up">
				<p>自助购物流程</p>
			</div>
			<div class="in-in">
				<div class="in-in-d">
					<p class="in-in-p">01</p>
					<div>
						<p>进入登录界面进行登录如果未注册请您先进注册</p>
						<img src="./image/dlu.png" />
					</div>
				</div>
				<div class="in-in-d">
					<p class="in-in-p">02</p>
					<div>
						<p>然后进入帮助中心修改支付密码跟实名认证</p>
						<img src="./image/bzzx.png" />
					</div>
				</div>
				<div class="in-in-d">
					<p class="in-in-p">03</p>
					<div>
						<p>然后您就可以挑选所喜好的货物</p>
						<img src="./image/huowu.png" />
					</div>
				</div>
			</div>

		</div>
		<div class="kuang">物流说明</div>
		<div class="xia">
			<div class="xia-div">
				<p>01</p>
				<div>
					<p>快递</p>
					<p>为保证您能最快收到宝贝，本物流将选择最适合的快递，无需指定快递</p>
				</div>
			</div>
			<div class="xia-div">
				<p>02</p>
				<div>
					<p>无需物流费用</p>
					<p>我们将承诺永不收取物流费用</p>
				</div>
			</div>
			<div class="xia-div">
				<p>03</p>
				<div>
					<p>发货时间</p>
					<p>订单付款后7天内发货</p>
				</div>
			</div>
			<div class="xia-div">
				<p>04</p>
				<div>
					<p>物流查询</p>
					<p>如果物流信息还没有显示，极有可能是快递公司数据没有更新
						但是已经在路上了，请耐心等待。
					</p>
				</div>
			</div>
		</div>
		<app-foot></app-foot>
	</div>
</template>

<script>
	import AppFoot from '../common/AppFoot.vue';
	export default {
		components: {
			AppFoot
		}
	}
</script>

<style scoped>
	.up {
		width: 100%;
		height: 200px;
		background-color: #00a49d;
		background-image: url("image/gwzhin.png");
		background-size: cover;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.up p {
		color: #fff;
		font-size: 70px;
		/* margin-left: -240px; */
	}

	.in {
		height: 950px;
	}

	.in-up {
		height: 30px;
		width: 150px;
		margin: 0 auto;
		background-color: #91a4f9;
		color: #fff;
	}

	.in-up p {
		text-align: center;
		line-height: 30px;
	}

	.in-in-d {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.in-in-p {
		margin-top: -25px;
		line-height: 0px;
		font-size: 100px;
		color: #00a49d;
	}

	.in-in-d img {
		width: 500px;
	}

	.kuang {
		background-color: #00a49d;
		height: 60px;
		text-align: center;
		font-size: 30px;
		line-height: 60px;
		color: #fff;
	}

	.xia {
		margin: 0 auto;
		display: flex;
		flex-flow: row wrap;
		width: 800px;
		height: 300px;
		line-height: 0;
	}

	.xia-div {
		margin-left: 20px;
		margin-top: 20px;
		height: 100px;
		width: 300px;
		margin: 0 auto;
		/* border: 1px solid red; */
		display: flex;
		/* flex-direction: row; */

		/* align-items: center; */
	}

	.xia-div p {
		line-height: 0;
		/* margin-top: 20px; */
		font-size: 40px;
	}

	.xia-div div p:first-child {
		margin-top: 35px;
		color: #c63838;
		font-size: 20px;
	}

	.xia-div div p:nth-child(2) {
		line-height: 1;
		/* margin-top: 20px; */
		color: #a6a6a6;
		font-size: 15px;
	}
</style>